//
//  DateRangePicker.swift
//  bill
//
//  Created by Eudon on 2025/6/18.
//

import SwiftUI

// 日期范围选择器
struct DateRangePicker: View {
    @Binding var startDate: Date
    @Binding var endDate: Date
    @State private var showingDatePicker = false
    
    var body: some View {
        HStack(spacing: 16) {
            VStack(alignment: .leading, spacing: 6) {
                Text("开始日期")
                    .font(.system(size: 14, weight: .medium))
                    .foregroundColor(Color(.secondaryLabel))
                Text(startDate, style: .date)
                    .font(.system(size: 16, weight: .semibold))
                    .foregroundColor(Color(.label))
            }
            
            Spacer()
            
            Image(systemName: "arrow.right")
                .font(.system(size: 16, weight: .medium))
                .foregroundColor(Color(.tertiaryLabel))
            
            Spacer()
            
            VStack(alignment: .trailing, spacing: 6) {
                Text("结束日期")
                    .font(.system(size: 14, weight: .medium))
                    .foregroundColor(Color(.secondaryLabel))
                Text(endDate, style: .date)
                    .font(.system(size: 16, weight: .semibold))
                    .foregroundColor(Color(.label))
            }
        }
        .padding(.horizontal, 20)
        .padding(.vertical, 20)
        .background(
            RoundedRectangle(cornerRadius: 16)
                .fill(Color(.systemBackground))
                .shadow(color: Color.black.opacity(0.08), radius: 8, x: 0, y: 2)
        )
        .onTapGesture {
            showingDatePicker = true
        }
        .sheet(isPresented: $showingDatePicker) {
            DateRangeSelectionView(startDate: $startDate, endDate: $endDate)
        }
    }
}

// 日期范围选择视图
struct DateRangeSelectionView: View {
    @Binding var startDate: Date
    @Binding var endDate: Date
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        VStack(spacing: 0) {
            // 顶部标题
            Text("选择日期范围")
                .font(.system(size: 18, weight: .semibold))
                .foregroundColor(Color(.label))
                .frame(maxWidth: .infinity)
                .padding(.top, 24)
                .padding(.bottom, 12)
                .background(Color(.systemGroupedBackground))
            Divider()
            // 日期选择卡片
            HStack(spacing: 24) {
                VStack(alignment: .center, spacing: 12) {
                    Text("开始日期")
                        .font(.system(size: 15, weight: .medium))
                        .foregroundColor(Color(.secondaryLabel))
                    DatePicker("开始日期", selection: $startDate, displayedComponents: .date)
                        .datePickerStyle(.compact)
                        .labelsHidden()
                }
                VStack(alignment: .center, spacing: 12) {
                    Text("结束日期")
                        .font(.system(size: 15, weight: .medium))
                        .foregroundColor(Color(.secondaryLabel))
                    DatePicker("结束日期", selection: $endDate, displayedComponents: .date)
                        .datePickerStyle(.compact)
                        .labelsHidden()
                }
            }
            .padding(.vertical, 32)
            .frame(maxWidth: .infinity)
            .background(
                RoundedRectangle(cornerRadius: 18)
                    .fill(Color(.systemBackground))
                    .shadow(color: Color.black.opacity(0.06), radius: 8, x: 0, y: 2)
            )
            .padding(.horizontal, 20)
            Spacer()
            // 底部按钮
            HStack(spacing: 16) {
                Button(action: { dismiss() }) {
                    Text("取消")
                        .font(.system(size: 16, weight: .medium))
                        .foregroundColor(Color(.systemBlue))
                        .frame(maxWidth: .infinity)
                        .padding(.vertical, 14)
                        .background(
                            RoundedRectangle(cornerRadius: 12)
                                .fill(Color(.systemGray6))
                        )
                }
                Button(action: { dismiss() }) {
                    Text("确定")
                        .font(.system(size: 16, weight: .semibold))
                        .foregroundColor(.white)
                        .frame(maxWidth: .infinity)
                        .padding(.vertical, 14)
                        .background(
                            RoundedRectangle(cornerRadius: 12)
                                .fill(Color(.systemBlue))
                        )
                }
            }
            .padding(.horizontal, 20)
            .padding(.bottom, 24)
        }
        .background(Color(.systemGroupedBackground).ignoresSafeArea())
    }
}

#Preview {
    DateRangePicker(
        startDate: .constant(Date()),
        endDate: .constant(Calendar.current.date(byAdding: .month, value: 1, to: Date())!)
    )
    .padding()
} 